<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="js/ueditor1_4_3_3-utf8-jsp/utf8-jsp/ueditor.config.js"></script>
<script type="text/javascript" src="js/ueditor1_4_3_3-utf8-jsp/utf8-jsp/ueditor.all.js"></script>
<link type="text/css" rel="stylesheet" href="css/cityLayout.css"/>
<script type="text/javascript" src="js/cityselect.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.min.css" />
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js" ></script>
<title>Insert title here</title>	
<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			.box{
				width:500px;
				height:30px;
			}
			.header li {
				list-style: none;
				float: left;
				width: 80px;
				text-align: center;
				line-height: 30px;
				cursor: pointer;
			}
			.box2 li {
				list-style: none;
			}
			table{
				border-spacing: 20px;
			}
			.box2-td{
				text-align: right;
				width: 100px;
			}
			#text{
				width: 320px;
			}
			.select{
				border: solid 1px #b5b0b0;
				border-radius: 5px;
				position: absolute;
				left: 30%;
				top: 30%;
				background: #eee;
				line-height: 40px;
				text-align: center;
				display: none;
				font-size:16px;
    		}
			.select2{
				width: 800px;
				height: 500px;
				border: solid 1px #b5b0b0;
				border-radius: 5px;
				position: absolute;
				left: 20%;
				top: 20%;
				background: #eee;
				line-height: 40px;
				text-align: center;
				display: none;
				font-size:16px;
    		}
    		
			#box-table{
				border-radius: 10px; 
				background-color: #FFFFFF;
				width: 350px;
				border-spacing: 10px;
			}
			#box-table button{
				width: 30px;
				height: 30px; 
				background-color: white;
				border-radius: 5px 0 0 5px;
				border: 1px #DDDDDD solid;
			}
			#box-table .text{
				width: 120px;
				height: 28px;
				border-radius:0 5px 5px 0;
				border:1px #DDDDDD solid;
			}
			#box-table select{
				border-color: #DDDDDD;
				border-radius:5px 0 0 5px;
				height: 30px;
				width: 152px;
			}
</style>
<script type="text/javascript">
	$(function(){
		init_city_select($("#citySelect"));
		$(".header>li").click(function(){
			var _index=$(this).index();
			$(".header>li").eq(_index).css("border-top","2px blue solid").siblings().css("border-top","2px #ffffff solid");
			$(".box2>ul>li").eq(_index).show().siblings().hide();
		});
		$(".add").click(function(){
			$(".select").show();
		});
		$(".query").click(function(){
			$(".select").hide();
			$(".select2").show();
			var select1=$("#select1").val();
			var text1=$("#text1").val();
			$.getJSON("lorders?action=Select",{select1:select1,text1:text1},function(e){
				for(var i=0;i<e.length;i++){
					var tr=$("<tr><td><input type='checkbox' name='checkbox' id="+e[i].g_code+"></td><td id='g_code'>"+e[i].g_code+"</td><td id='g_name'>"+e[i].g_name+"</td><input type='hidden' value='"+e[i].g_code+"' name='g_code'><td id='g_price'>"+e[i].g_price+"</td><input type='hidden' value='"+e[i].g_price+"' name='g_price'><td id='p_newname'><img src="+e[i].p_newname+" style='width:100px;'></td></tr>");
					$(".select-table").append(tr);
				}
			});
		});
		$(".query2").click(function(){
			var a=$("input[name='checkbox']:checked");
			if(a.length==0){
            	alert("至少选中一个");
            	return;
            } 
			//获取所有已选的id存到集合
			var list=[];
			$("input[name='checkbox']:checked").each(function(i, o){
				list.push($(o).attr("id"));
            });
			for(var i=0;i<a.length;i++){
				var td1=$(a.parent().parent().children("#g_name"));
				var td2=$(a.parent().parent().children("#p_newname"));
				var td3=$(a.parent().parent().children("#g_price"));
				var td4=$("<td><input type='text' value='1' name='g_num'></td>");
				var td5=$("<td>删除</td>");
				var tr=$("<tr>");
				tr.append(td1);
				tr.append(td2);
				tr.append(td3);
				tr.append(td4);
				tr.append(td5);
				$(".tbody1").append(tr);
			}
			$(".select2").hide();
		});
	});
</script>
</head>
<body style="font-size: 20px;">
	<div class="top" style="padding: 20px 30px 10px; font-size: 16px;">
		<a href="#">商品</a>/
		<a href="#">商品管理</a>/
		<span>商品列表</span>
	</div>
	<div class="bottom">
		<div class="span12" style="width: 96%;">
		<form action="lorders?action=add" method="post">
			<div class="box">
				<ul class="header" style="padding: 10px;">
					<li style="border-top: 2px blue solid;">商品信息</li>
					<li style="border-top: 2px white solid;">订单配置</li>
					<li style="border-top: 2px white solid; width:100px;">收货人信息</li>
				</ul>
			</div>
			<div class="box2">
				<ul>
					<li>
						<table class="table">
							<thead>
								<tr>
									<th>商品名称</th>
									<th>商品图片</th>
									<th>商品价格</th>
									<th>商品数量</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody class="tbody1">
								
							</tbody>
						</table>
						<input type="button" class="add" value="添加商品"></button>
						<div class="select">
							<div class="select-top">商品检索</div>
							<div class="select-bottom">
								<table id="box-table">
									<tr>
										<td colspan="2">
											<select name="select" id="select1" style="width: 85px;">
												<option vlaue="商品名称">商品名称</option>
												<option vlaue="商品编号">商品编号</option>
											</select>
											<input class="text" name="text1" id="text1" type="text" placeholder="输入查询信息" style="width: 235px;" />
										</td>
									</tr>
									<tr>
										<td>
											<select style="width: 152px; border-radius: 5px;">
												<option>选择商品库存量</option>
												<option>无货</option>
												<option>低于10</option>
												<option>10~100</option>
												<option>高于100</option>
											</select>
										</td>
										<td>
											<select style="width: 152px; border-radius: 5px;">
												<option>选择商品状态</option>
												<option>上架</option>
												<option>下架</option>
												<option>待审</option>
											</select>
										</td>
									</tr>
									<tr>
										<td>
											<select style="width: 152px; border-radius: 5px;">
												<option>选择商品标签</option>
												<option>最新商品</option>
												<option>特价商品</option>
												<option>热卖商品</option>
												<option>推荐商品</option>
											</select>
										</td>
										<td>
											<select style="width: 152px; border-radius: 5px;">
												<option>选择商品品牌</option>
												<option>最新商品</option>
												<option>特价商品</option>
												<option>热卖商品</option>
												<option>推荐商品</option>
											</select>
										</td>
									</tr>
									<tr>
										<td>
											<button style="width: 152px; border-radius: 5px;">
												<i class="fa fa-reorder"></i> 选择商品分类
											</button>
										</td>
									</tr>
									<tr>
										<td>
											<button>
												<i class="fa fa-rmb"></i>
											</button>
											<input class="text" type="text" placeholder="价格下限" />
										</td>
										<td>
											<button>
												<i class="fa fa-rmb"></i>
											</button>
											<input class="text" type="text" placeholder="价格上限" />
										</td>
									</tr>
									<tr>
										<td>
											<button>
												<i class="fa fa-calendar"></i>
											</button>
											<input class="text" type="text" placeholder="创建起始时间" />
										</td>
										<td>
											<button>
												<i class="fa fa-calendar"></i>
											</button>
											<input class="text" type="text" placeholder="创建结束时间" />
										</td>
									</tr>
									<tr>
										<td colspan="2">
											<input class="query" type="button" value="查询">
										</td>
									</tr>
								</table>
							</div>
        				</div>
        				<div class="select2">
							<div class="select-top">商品检索</div>
							<div class="select-bottom">
								<table class="select-table">
									<tr>
										<th></th>
										<th>商品编号</th>
										<th>商品名称</th>
										<th>价格</th>
										<th>商品图片</th>
									</tr>
								</table>
								<input class="query2" type="button" value="查询">
							</div>
						</div>
					</li>
					<li style="display: none;">
						<table class="table">
							<tr>
								<td style="text-align: right; width: 200px;">配送方式：</td>
								<td>
									<select name="ship_mode">
										<option value="0">先收款后发货</option>
										<option value="1">货到付款</option>
									</select>
								</td>
							</tr>
							<tr>
								<td style="text-align: right; width: 200px;">配送运费：</td>
								<td><input id="text" type="text" name="c_name" style="width: 100%;"></td>
							</tr>
							<tr>
								<td style="text-align: right; width: 200px;">支付方式：</td>
								<td>
									<select name="pay">
										<option value="0">微信</option>
										<option value="1">支付宝</option>
									</select>
								</td>
							</tr>
							<tr>
								<td style="text-align: right; width: 200px;">送货时间：</td>
								<td>
									<input type="radio" name="o_date" value="任意" checked="checked">任意
									<input type="radio" name="o_date" value="周一到周五">周一到周五
									<input type="radio" name="o_date" value="周末">周末
								</td>
							</tr>
						</table>
					</li>
					<li style="display: none;">
						<table class="table">
							<tr>
								<td style="text-align: right; width: 200px;">所属用户名：</td>
								<td><input id="text" type="text" name="u_id" style="width: 100%;"></td>
							</tr>
							<tr>
								<td style="text-align: right; width: 200px;">收货人姓名：</td>
								<td><input id="text" type="text" name="r_name" style="width: 100%;"></td>
							</tr>
							<tr>
								<td style="text-align: right; width: 200px;">收货地区：</td>
								<td>
									<input id="citySelect" name="a_name" type="text" value="${vip.getAname() }"  class="city_input" >
								</td>
							</tr>
							<tr>
								<td style="text-align: right; width: 200px;">收货地址：</td>
								<td><input id="text" type="text" name="address" style="width: 100%;"></td>
							</tr>
							<tr>
								<td style="text-align: right; width: 200px;">联系手机：</td>
								<td><input id="text" type="text" name="tel" style="width: 100%;"></td>
							</tr>
							<tr>
								<td style="text-align: right; width: 200px;">联系电话：</td>
								<td><input id="text" type="text" name="phone" style="width: 100%;"></td>
							</tr>
							<tr>
								<td style="text-align: right; width: 200px;">邮编：</td>
								<td><input id="text" type="text" name="zip_code" style="width: 100%;"></td>
							</tr>
						</table>
					</li>
				</ul>
			</div>
			<div class="span12" style="width: 96%;padding-left: 50%;"><input type="submit" value="发布商品"></div>
		</form>
		</div>
	</div>
</body>
</html>